<template>
  <div class="login">
    <div class="options">
      <div class="schoolLogin">
        <el-form
          :model="userData"
          :rules="rules"
          ref="form"
          v-loading="isLogin"
        >
          <h2>用户登录</h2>
          <el-form-item prop="username">
            <label for="username">账号</label>：
            <el-input
              id="username"
              v-model="userData.username"
              clearable
              placeholder="请输入账号"
            >
              <template slot="prefix">
                <i class="el-icon-user"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <label for="password">密码</label>：
            <el-input
              id="password"
              v-model="userData.userpwd"
              show-password
              placeholder="请输入密码"
            >
              <template slot="prefix">
                <i class="el-icon-menu"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="submitForm" type="primary" class="btn"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import { login } from "@/api/school";
export default {
  name: "login",
  data() {
    return {
      userData: {
        username: "",
        userpwd: "",
      },
      isLogin: false,
      // required: true  表示必输字段
      rules: {
        username: [
          {
            required: true,
            min: 1,
            max: 18,
            message: "请输入3到18位的用户名",
            trigger: "blur",
          },
        ],
        userpwd: [
          {
            required: true,
            min: 1,
            max: 18,
            message: "请输入3到18位的密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    // setUser是mutation中的一个方法
    // ...mapMutations(["setSchoolname", "setCityname", "setProvincename"]),
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isLogin = true;
          login({
            username: this.userData.username,
            userpwd: this.userData.userpwd,
          }).then((res) => {
            this.isLogin = false;
            if (res.data.status == 1) {
              this.$message({
                message: "用户名或密码错误！",
                type: "error",
              });
              return false;
            }
            let data = res.data.result;
            if (data.status === "user") {
              this.$store.commit(data.status);
              this.$router.push("/user");
            }
            if (data.status === "admin") {
              this.$store.commit(data.status);
              this.$router.push("/admin");
            }
            // });
            console.log(res);
          });
        }
        return false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-form {
    padding: 15px 70px 0 70px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.5);
    h2 {
      margin-bottom: 35px;
      // text-shadow: 10px 10px 2px #ccc;
    }
    .el-input {
      width: 200px;
    }
    label {
      width: 50px;
      display: inline-block;
      text-align: justify;
      text-align-last: justify;
    }
    .el-form-item {
      width: 100%;
      text-align: right;
      & /deep/ .el-form-item__error {
        left: 69px;
      }
    }
  }
}
</style>